.tabs {
  display: flex;
  width: 100%;
  height: 38px;
  overflow: auto hidden;
  color: var(--base);
  background-color: var(--bg);
  flex-shrink: 0;
  align-items: center;
  border-bottom: 1px solid var(--border);
  box-sizing: border-box;

  &::-webkit-scrollbar {
    height: 1px;
  }

  &::-webkit-scrollbar-track {
    background-color: var(--border);
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--primary);
  }

  .tab-item {
    display: inline-flex;
    padding: 8px 10px 6px;
    font-size: 13px;
    line-height: 20px;
    cursor: pointer;
    align-items: center;
    border-bottom: 3px solid transparent;
    flex-shrink: 0;

    &.actived {
      color: var(--primary);
      border-bottom: 3px solid var(--primary);
    }

    &:first-child {
      cursor: text;
    }
  }

  .import-map-wrapper {
    position: sticky;
    top: 0;
    right: 0;
    padding-left: 10px;
    margin-left: auto;
    background-color: var(--bg);
    flex-shrink: 0;

    .tab-item {
      cursor: pointer !important;
    }
  }

  .add {
    display: flex;
    width: 38px;
    height: 100%;
    font-size: 18px;
    color: var(--base);
    cursor: pointer;
    justify-content: center;
    align-items: center;
    border-bottom: 3px solid transparent;

    &:hover {
      color: var(--primary);
    }
  }
}

.tabs-item-input {
  z-index: 11;
  width: 90px;
  padding: 4px 0 4px 10px;
  font-size: 13px;
  color: var(--base);
  background-color: var(--border);
  border: 1px solid var(--border);
  border-radius: 4px;
  outline: none;
}

.input-mask {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background-color: rgb(0 0 0 / 40%);
}
